<?php 
	$table = $this->table;
	$search_mode = $this->search_mode;
?>

<?php if(!$search_mode):?>
<section class="grid_12">
	<!-- 検索フォーム -->
	<div class="block-border" style="margin-bottom: 20px;">
    	<div class="block-content">
	        <h1>検索</h1>
	       <form method="post" class="form" action="/admin/room" id="search_form">
	        	<p>
        			<label for="start_month" class="inline">スタート月</label>
		        	<?php echo $this->formText("start_month", $this->start_month, array('class'=>'date-picker','readonly'=>"true"))?>
		        	
		        	<label for="end_month" class="inline">エンド月</label>
		        	<?php echo $this->formText("end_month", $this->end_month, array('class'=>'date-picker', "readonly"=>"true"))?>
		        </p>
	        	
	        	<p>
		        	<label for="search_type" class="inline">検索キー</label>
		        	<?php echo $this->formText("search_key")?>
		        	<button type="submit" id="save_btn">検索</button>
		        </p>
	        </form>
    	</div>
	</div>

	<!-- 一覧 -->
	<div id="table_container">
		<?php echo $this->partial("/component/table.phtml", array('table'=>$table,'table_translate'=>$this->table_translate))?>
	</div>
	
	<?php echo $this->formHidden("msg", $this->msg);?>
</section>

<?php else :?>
	<?php echo $this->partial("/component/table.phtml", array('table'=>$table,'table_translate'=>$this->table_translate))?>
<?php endif;?>


<?php if(!$search_mode):?>
<!-- Table script -->
<script type="text/javascript" src="/js/table.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('.date-picker').datepicker( {
	        changeMonth: true,
	        changeYear: true,
	        dateFormat: 'yy-mm',
	        showOn: "button",
			buttonImage: "/images/icons/calendar.gif",
			buttonImageOnly: true,
			monthNamesShort : ['１月', '２月', '３月', '４月', '５月', '６月', '７月', '８月', '９月', '１０月', '１１月', '１２月'],
			yearRange: 'c-1:c',
			maxDate: '+12m +0w',
			minDate: '-12m +0w',
			showButtonPanel: true,
			showMonthAfterYear: true,
			currentText: '今月',
			closeText: '選択',
	        onClose: function(dateText, inst) { 
	            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
	            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
	            $(this).datepicker('setDate', new Date(year, month, 1));
	        }
	    });
		
		$("#search_form").submit(function(){
			refreshTable();
			return false;
		});

		if($("#msg").val() != null && $("#msg").val() != ''){
			notify($("#msg").val());
		}
	});	

	/** AJAXを使ってテーブルのデータをリロードする*/
	function refreshTable(){
		var ajax_url = "/admin/payment-history/index";
		
		var datas = "search_key=" + $("#search_key").val();
		datas += "&start_month=" + $("#start_month").val();
		datas += "&end_month=" + $("#end_month").val();
		datas += "&line_per_page=" + $("#line_per_page").val();
		datas += "&page=" + $("#page").val();
		datas += "&search=1";

		
		$(".black-cell span").attr('class','loading');
		jQuery.ajax({
			  url: ajax_url,
			  type: "POST",
			  data: datas,
			  success: function(data) {
				  $("#table_container").html(data);
			  },
			  complete: function(){	
				   $(".black-cell span").attr('class','success');
			  },
			  error: function() {
				  alert("Have error when loading data from server");
			  }
		});
	}
</script>

<style>
	.ui-datepicker-calendar {
	    display: none;
	    }
</style>
<?php endif;?>
